<template>
  <div class="type-container">
    <el-descriptions border class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">申请类型</div>
        </template>
        <div class="custom-content">{{ applicationTypeStr }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请信息正文 -->
  <div class="content-container">
    <el-descriptions border class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">社团名</div>
        </template>
        <div class="custom-content">{{ clubInfo.clubName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">社团编号</div>
        </template>
        <div class="custom-content">{{ clubInfo.clubId }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请原因填写区域 -->
  <div class="reason-container">
    <el-input
        v-model="reason"
        type="textarea"
        :rows="4"
        placeholder="请输入申请原因（选填）"
    ></el-input>
  </div>

  <!-- 提交申请按钮 -->
  <div class="submit-button-container">
    <el-button type="primary" @click="submit"> 提交申请</el-button>
  </div>
</template>

<script setup lang="ts">
import {type Action, ElButton, ElInput, ElMessage, ElMessageBox} from "element-plus";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {
  ClubControllerService,
  type UserApplicationAddRequest, UserApplicationControllerService
} from "../../../../generated";
import {useUserStore} from "../../../stores/user.ts";

interface ClubInfo {
  clubId: number;
  clubName: string;
}

const clubInfo = ref<ClubInfo>({
  clubId: 0,
  clubName: "",
});

// 使用 vue-router 的 useRoute 方法获取路由信息
const route = useRoute();
const type = route.meta.type as number;  // 从路由配置的 meta 中获取 type 字段

const clubIdStr = route.query.clubId as string | undefined; // 获取查询参数
const clubId = Number(clubIdStr); // 转换为数字

const applicationTypeStr = ref('');
onMounted(async () => {
  const res = await ClubControllerService.getClubVoById(clubId);
  if(res?.code === 0) {
    clubInfo.value.clubId = res?.data?.id as number;
    clubInfo.value.clubName = res?.data?.clubName as string;
  } else {
    ElMessage.error("信息加载错误，请重试: " + res?.message);
  }

  if(type === 1){
    applicationTypeStr.value = '加入社团';
  } else {
    applicationTypeStr.value = '退出社团';
  }
})

const reason = ref("");
const store = useUserStore();
const submit = async () => {
  const request = {
    userId: store.id,
    reason: reason.value,
    type: type,
    additionalInfo: clubId,
  } as UserApplicationAddRequest;
  const res = await UserApplicationControllerService.addApplication(request);
  if (res.code === 0) {
    const successStr = '申请等级: 个人; 申请类型: ' + applicationTypeStr.value + '; 申请编号:' + res.data;
    ElMessageBox.alert(
        successStr,
        "提交成功",
        {
          confirmButtonText: "确定",
          callback: (action: Action) => {
            if (action === "confirm") {
              try {
                window.close();
              } catch (e) {
                ElMessage({
                  type: "info",
                  message: "无法自动关闭页面，请手动关闭此标签页。",
                  duration: 0,
                  showClose: true,
                });
              }
            }
          },
        },
    );
  } else {
    const errorStr = '错误原因: ' + res.message;
    ElMessageBox.alert(errorStr, "提交失败", {
      confirmButtonText: "确定",
      callback: (action: Action) => {
        if (action === "confirm") {
          window.location.reload()  // 刷新当前页面
        }
      },
    })
  }
  ElMessage.success("提交申请");
};
</script>

<style scoped lang="scss">
.view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.type-container {
  width: 20%;
  margin-bottom: 20px;
}
.custom-label,
.custom-content {
  font-size: 15px;
}

.content-container {
  margin-top: 20px;
  margin-bottom: 40px;
}

.reason-container {
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
